<template>
  <!--内容-->
  <div>
    <v-header></v-header>
    <div class="ris_cont">
      <!--<div class="ris_cont_headNav">系统设置&gt;权限管理</div>-->
      <div class="ris_cont_headHint">角色信息<span class="ris_cont_headHint_add" @click="addPerModal()">+</span></div>
      <!--内容-->
      <div class="ris_p_cont">
        <table class="ris_p_cont_tab">
          <tr>
            <th>编&nbsp;&nbsp;号</th>
            <th>名&nbsp;&nbsp;称</th>
            <!--<th>拼音码</th>-->
            <th>是否使用</th>
            <th>操作</th>
          </tr>
          <tr v-for="item in actorList">
            <td>{{item.code}}</td>
            <td>{{item.name}}</td>
            <!--<td>{{item.id}}</td>-->
            <td>{{item.isuse==1?'是':'否'}}</td>
            <!--<td>123456</td>-->
            <!--<td>管理员</td>-->
            <!--<td>GLY</td>-->
            <!--<td>是</td>-->
            <td>
              <!--<button class="ris_p_button_btn" @click="toButton">按钮权限</button>-->
              <!--<router-link :to="{ name: 'ButtonPermission', query: {  }}" ><button class="ris_p_button_btn">按钮权限</button></router-link>-->
              <router-link :to="{ name: 'MenuPermission', query: {id : item.code}}" ><button class="ris_p_menu_btn">菜单权限</button></router-link>
              <router-link :to="{ name: 'DeptPermission', query: {id : item.code}}" ><button class="ris_p_dept_btn">科室权限</button></router-link>
              <button class="ris_p_cont_tab_amend" @click="addPerModal(item.id, item.code)">修改</button>
              <button class="ris_p_cont_tab_delete" @click="deletePerModal(item.code)">删除</button>
            </td>
          </tr>
        </table>
      </div>

      <!--点击修改或者新增的时候的模态框-->
      <div class="ris_p_chang" v-show="addPModal">
        <div class="ris_p_chang_div">
          <p class="ris_p_chang_div_head">角色信息修改</p>
          <table class="ris_p_chang_tab">
            <tr>
              <td>排序号</td>
              <td><input type="number" v-model="actor.sortnum" name="sortnum"></td>
            </tr>
            <!--<tr>-->
              <!--<td>编&nbsp;号</td>-->
              <!--<td><input type="number" v-model="actor.id"></td>-->
            <!--</tr>-->
            <tr>
              <td>名&nbsp;称</td>
              <td><input type="text" v-model="actor.name" name="name"></td>
            </tr>
            <!--<tr>-->
              <!--<td>拼音码</td>-->
              <!--<td><input type="text"></td>-->
            <!--</tr>-->
            <tr>
              <td>是否使用</td>
              <td>
                <select v-model="actor.isuse" name="isuse">
                  <option v-bind:value="1">是</option>
                  <option v-bind:value="0">否</option>
                </select>
              </td>
            </tr>
            <tr>
              <td>备注</td>
              <td><textarea v-model="actor.memo" name="memo"></textarea></td>
            </tr>
          </table>
          <div class="ris_p_chang_btn">
            <button @click="addOrUpdateActor">确认</button>
            <button class="ris_p_chang_tab_qx" @click="closeAddPModal">取消</button>
          </div>
        </div>
      </div>

      <!--菜单权限-->
      <div class="ris_p_menu"></div>

      <!--菜单权限-->
      <div class="ris_p_dept"></div>

      <!--按钮权限-->
      <div class="ris_p_button"></div>


    </div>
  </div>

</template>

<script>
  import Header from '@/components/Header/Header';
  import {getActorList, getActorById, addOrUpdateActor, deleteActor} from '@/api/settings';

  export default {
    name: 'hello',
    components: {
      'v-header': Header
    },
    data() {
      return {
        url: "",
        addPModal: false,//新增或者修改的模态
        actorList: '',
        actor:{
          id: '',
          name: '',
          isuse: 1,
          sortnum:'',
          memo:''
        }
      }
    },
    props: {
      root: Object
    },
    created() {
      return new Promise((resolve, reject) => {
        getActorList().then(response => {
          this.actorList = response.data;
          resolve()
        }).catch(error => {
          reject(error)
        })
      })
    },
    mounted() {

    },
    methods: {
      //新增按钮
      addPerModal(id, code) {
        this.addPModal = true;
        if (id != undefined) {
          getActorById(code).then(response => {
            this.actor.id = response.data.id;
            this.actor.name = response.data.name;
            this.actor.isuse = response.data.isuse;
            this.actor.sortnum = response.data.sortnum;
            this.actor.memo = response.data.memo;
          })
        }
        this.clear()
        this.actor.sortnum = '999';
      },
      //关闭新增或者修改的模态
      closeAddPModal() {
        this.addPModal = false;
        // this.clear()
      },
      //点击删除按钮
      deletePerModal(id) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteActor(id).then(response => {
            this.refresh();
            this.$notify.success({
              title: '成功',
              message: '删除成功',
              duration: 2000,
              // offset: 100
            });
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      addOrUpdateActor() {
        addOrUpdateActor(this.actor.id, this.actor.name, this.actor.isuse, this.actor.sortnum, this.actor.memo).then(response => {
          this.refresh();
          this.addPModal = false;
          this.$notify.success({
            title: '成功',
            message: response.data,
            duration: 2000,
            // offset: 100
          });
          })
      },
      clear() {
        this.actor.id = ''
        this.actor.name = ''
        // this.actor.isuse = ''
        this.actor.sortnum = ''
        this.actor.memo = ''
      },
      refresh() {
        getActorList().then(response => {
          this.actorList = response.data;
        })
      }
    },
//	    beforeUpdate() {
//		    this.$nextTick(function(){
//
//		    })
//		},

  }
</script>

<style scoped>
  .ris_cont_headHint {
    height: 40px;
    background-color: #999;
    color: #f1f1f1;
    line-height: 40px;
    padding-left: 30px;
    box-sizing: border-box;
  }

  .ris_p_cont {
    width: 100%;
    margin: 0 auto;
    padding-top: 20px;
    background-color: #fff;
    padding-bottom: 20px;
  }

  .ris_cont_headHint_add {
    font-size: 24px;
    padding: 0 25px;
    display: inline-block;
    float: right;
    cursor: pointer;
  }

  .ris_p_cont_tab {
    width: 97%;
    margin: 0 auto;
    background-color: #fff;
    text-align: center;
  }

  .ris_p_cont_tab tr th, .ris_p_cont_tab tr td {
    line-height: 40px;
    border: 1px solid #ddd;
  }

  .ris_p_cont_tab tr th {
    background-color: #666;
    color: #fff;
  }

  .ris_p_cont_tab tr:nth-child(odd) {
    background-color: #f7f7f7;
  }

  .ris_p_cont_tab button {
    border: 0;
    background-color: transparent;
    color: #215c84;
    padding: 5px 12px;
    cursor: pointer;
  }

  .ris_p_cont_tab tr td:last-child {
    width: 340px;
  }

  .ris_p_cont_tab button.ris_p_cont_tab_delete {
    color: #ff3c2b;
  }

  /*点击修改的按钮*/
  .ris_p_chang {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(66, 66, 66, .2);
    left: 0;
    top: 0;
    /*display: none;*/
  }

  .ris_p_chang_div {
    width: 400px;
    height: 370px;
    background: #fff;
    border: 1px solid #666;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -200px;
    margin-top: -230px;
    border-radius: 10px;
  }

  .ris_p_chang_div_head {
    line-height: 40px;
    padding-left: 20px;
    color: #fff;
    background: #215c84;
    border-radius: 10px 10px 0 0;
  }

  .ris_p_chang_tab {
    width: 80%;
    margin: 0 auto;
    line-height: 50px;
    margin-top: 20px;
  }

  .ris_p_chang_tab tr td:nth-child(1) {
    width: 30%;
    text-align: right;
    padding-right: 30px;
  }

  .ris_p_chang_tab tr td:nth-child(2) {
    width: 70%;
  }

  .ris_p_chang_tab tr td input, .ris_p_chang_tab tr td select {
    width: 100%;
    height: 32px;
    border: 1px solid #999;
    border-radius: 12px;
    padding: 0 10px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
  }

  .ris_p_chang_tab tr td textarea {
    width: 100%;
    height: 50px;
    border: 1px solid #999;
    border-radius: 12px;
    padding: 3px 10px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    margin-top: 10px;
  }

  .ris_p_chang_btn {
    width: 90%;
    margin: 0 auto;
    text-align: right;
  }

  .ris_p_chang_btn button {
    width: 80px;
    height: 34px;
    border: 0;
    border-radius: 14px;
    background: #215c84;
    color: #fff;
    margin: 10px 20px 0 15px;
    cursor: pointer;
  }

  .ris_p_chang_btn button:hover {
    background-color: #1a4161;
  }


</style>
